<template>
  <HeaderNav/>
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <section class="ct">
        <h1 class="attent-title">修改密码</h1>

        <div class="bg-hr"></div>

        <div class="upload">
          <form action="" method="post">
            <p>
              <label>旧密码：</label>
              <input class="upt" type="password" v-model="password" placeholder="请输入旧密码"/>
              <em></em>
            </p>
            <p>
              <label>新密码：</label>
              <input class="upt" type="password" v-model="newPassword" placeholder="请输入新密码"/>
              <em></em>
              <span class="source-tag-msg">密码长度为6~20</span>
            </p>
            <p>
              <label>确认密码：</label>
              <input class="upt" type="password" v-model="confirmPassword" placeholder="请再次输入新密码"/>
              <em></em>
              <span class="source-tag-msg">两次输入的密码必须保持一致</span>
            </p>

            <p><label class="btn"><a class="btn" @click.prevent="handleModifyPassword">确认修改</a></label></p>
          </form>
        </div>
      </section>
    </div>
  </article>
  <Footer/>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";

export default {
  components: {
    HeaderNav,
    Footer,
  },
  data() {
    return {
      password: "",
      newPassword: "",
      confirmPassword: "",
    }
  },
  methods: {
    handleModifyPassword() {
      // 验证密码
      if (this.password === "") {
         this.$toastr.warning("旧密码不允许为空");
         return ;
      }
      if (this.newPassword === "") {
        this.$toastr.warning("新密码不允许为空");
        return ;
      }
      if (this.newPassword !== this.confirmPassword) {
        this.$toastr.warning("两次输入的新密码不一致");
        return ;
      }
      // 发送异步请求、完成密码的修改
      this.$api.modifyPassword(this.password, this.newPassword).then(ret=> {
         if (ret.status) {
            this.$toastr.success("密码修改成功");
            this.password = "" ;
            this.newPassword = "" ;
            this.confirmPassword = "" ;
         }
      })
    }
  }
}
</script>

